<template>
	<view class="">
		<view class="top flex flex-col justify-center items-center" v-if="!userinfo.nickname">
			<image src="../../static/image/mr.png" mode="widthFix" style="background:#ccc"></image>
			
			<button hover-class="none" style="background-color: #2979ff;" @tap="getUserProfile" class=" btn1">一键授权登录</button>
		</view>
		<view class="top flex flex-col justify-center items-center" v-else>
			<image :src="$util.img(userinfo.avatar)" mode="widthFix" style="background:#ccc;border: 1rpx solid #2979ff;"></image>
			<text>{{userinfo.nickname}}</text>
		</view>
		<view class="menu flex flex-col justify-start items-center w100">
			<view class="item flex flex-row justify-between items-center border-bottom w100"
				v-for="(item,index) in menu" :key="index" @click="go(item.url)">
				<text>{{item.name}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="w100" v-if="userinfo.nickname">
			<button hover-class="none" style="background-color: none;width: 80%;" @tap="tuichu" class=" btn1 btn2">退出登录</button>
		</view>
	</view>
</template>

<script>
	import http from 'common/js/http.js';

	export default {

		mixins: [http],
		data() {
			return {
				userinfo:{},
				token: '',
				menu: [{
						name: '个人信息',
						url: '/pages/my/my'
					},
					{
						name: '我的议事协商',
						url: '/pages/my/ys'
					},
					{
						name: '我的党建问卷',
						url: '/pages/my/wj'
					},
					{
						name: '我的志愿申请',
						url: '/pages/my/sq'
					},
					{
						name: '我的服务设施预约',
						url: '/pages/my/yy'
					},
					{
						name: '我的意见征集',
						url: '/pages/my/zj'
					},
					{
						name: '我的居委信箱',
						url: '/pages/my/xx'
					}
					

				]
			}
		},
		onLoad() {

		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.token = uni.getStorageSync('token')
			}
			this.userinfo = uni.getStorageSync('userinfo')
			console.log(this.userinfo)
		},
		methods: {
			go(url){
				if(this.token==''){
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url:url
				})
			},
			tuichu(){
				uni.removeStorageSync('token')
				uni.removeStorageSync('userinfo')
				this.token = ''
				this.userinfo = {}
			},
			gettoken(){
				this.sendRequest({
					url:'user/index',
					success:res=>{
						console.log(res)
					}
				})
			},
			getUserProfile() {
				let self = this;
				uni.showLoading({
					title: '正在登录中'
				});
				wx.login({ 
				  success:res=>{ 
					  console.log(res)
				    if (res.code) { 
						
						this.sendRequest({
							data:{
								code:res.code
							},
							url:'user/wxLogin',
							success:e=>{
								if(e.code>0){
									this.userinfo = e.data.userinfo
									this.token = e.data.userinfo.token
									uni.setStorageSync('userinfo',e.data.userinfo)
									uni.setStorageSync('token',e.data.userinfo.token)
									uni.hideLoading()
									uni.showToast({
										title:'登录成功'
									})
								}
							}
						})
				    } else { 
				      console.log('登录失败！' + res.errMsg) 
				    } 
				  } 
				}) 
				}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}
button{
	margin-top: 20rpx;
	width: 300rpx;
	height: 70rpx;
	color: #fff;
	line-height: 70rpx;
	margin-bottom: 40rpx;
	border-radius: 120rpx;
	font-size: 28rpx;
}
	.top {
		margin: 80rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-bottom: 10rpx;
		}
	}

	.menu {
		width: 710rpx;
		margin: 40rpx 20rpx;
		background: #fff;

		.item {
			padding: 30rpx;
		}
	}
	.nbtn{
		background-color: #2979ff;
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius:40rpx;
		margin-top: 20rpx;
	}
	.btn2{
		border:1rpx solid #2979ff;
		color: #2979ff;
	}
</style>